<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <!-- height: `calc(100vh - ${$Platform.navbar}px)`, -->
    <view
      :class="[`${prefixCls}-invoice-container`]"
      :style="{ height: invoiceList.length == 0 ? `calc(100vh - ${$Platform.navbar}px)` : '', background: invoiceList.length == 0 ? '' : '#f1f1f1' }"
    >
      <view class="invoice-card">
        <view class="invoice-container">
          <view class="left" @click="handleOpen"> <uv-icon name="question-circle" size="12"></uv-icon>开票金额说明</view>
          <!-- <view class="right" @click="handleOpen"> <uv-icon name="list" size="12"></uv-icon>开票历史</view> -->
        </view>
      </view>
      <!-- 没有数据 -->
      <view v-if="invoiceList.length == 0" class="no-data">
        <view class="data">
          <uv-icon name="order" size="48"></uv-icon>
          <view class="no-data-text">无发票与报销</view>
          <view class="no-data-tips">缴纳账单后才可以开发票哦</view>
        </view>
      </view>
      <view v-else class="data-container">
        <view class="data-item" v-for="(item, index) in invoiceList" :key="index" @click="handleDetail(item)">
          <view class="date">
            <text class="time">申请日期 {{ item.create_at }}</text>
            <view class="status">
              <text class="time">{{ item.status }}</text>
              <uv-icon name="arrow-right" size="14" />
            </view>
          </view>
          <view class="detail">
            <view class="row">
              <view class="">
                开票金额: <text class="price">￥{{ item.amount }}</text>
              </view>
              <view class="invoice">{{ item.fp_type }}</view>
            </view>
            <view class="row">
              <view class="">发票内容: </view>
              <view class="">{{ item.electro_content }}</view>
            </view>
          </view>
        </view>
      </view>
      <uv-popup ref="popup">
        <view class="no-bg">
          <text class="text">1.根据国家税务局公告2015年第84号的规定，增值税电子普通发票的法律效力、基本用途、基本使用规定等与税务机关监制的增值税普通发票相同，</text>
          <text class="text">2.押金、代收的水电费、罚金、违约金，以及使用的优惠券、折扣券等不支持开具发票。</text>
          <text class="text">3.季付、年付款项，只能遵循会计收入确认原则，按月开具发票:</text>
          <text class="text">4.仅支持对本年度内的付费款项开具发票。如有疑问，请联系本地店长咨询。</text>
        </view>
      </uv-popup>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { invoiceList } from './api'

export default {
  name: 'invoice',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      invoiceList: [],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.getData()
  },
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    handleOpen() {
      this.$refs.popup.open('center')
    },
    async getData() {
      const { data } = await invoiceList()
      this.invoiceList = data
      uni.stopPullDownRefresh()
    },
    handleDetail({ id }) {
      this.$ROUTE.go('/pages/subpackage/invoice/detail', { id })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('invoice-container')} {
  position: relative;
  background: white;
  overflow: hidden;
  box-sizing: border-box;
  .invoice-card {
    background: white;
    border: 10px solid #f5f5f5;
    border-left: 0;
    border-right: 0;
    display: flex;
    align-items: center;
    padding: 15px 0;
    // margin: 10px 0;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 12px;
    .invoice-container {
      // width: 50%;
      margin-right: 15px;
      margin-left: auto;
      display: flex;
    }
    .left {
      display: flex;
      ::v-deep .uvicon {
        margin-right: 3px;
        margin-top: 2px;
      }
    }
    .right {
      display: flex;
      margin-right: auto;
      margin-left: 20px;
      ::v-deep .uvicon {
        margin-right: 3px;
        margin-top: 2px;
      }
    }
  }
  .no-data {
    aspect-ratio: 1;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    .data {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .no-data-tips {
        font-size: 12px;
        color: #999999;
        margin-top: 12px;
      }
    }
  }
  .data-container {
    display: flex;
    flex-direction: column;
    margin: 0px 15px;
    overflow-y: auto;
    .data-item {
      background: white;
      margin-top: 10px;
      box-sizing: border-box;
      border-radius: 8rpx;
      .date {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 15rpx;
        font-size: 12px;
        border-bottom: 1px solid #f1f1f1;
        .status {
          display: flex;
          align-items: center;
        }
      }
      .detail {
        padding: 15rpx;
        .row {
          display: flex;
          padding: 8px 0;
          .invoice {
            margin-left: auto;
            margin-right: 10px;
            font-size: 10px;
            border: 1px solid $uv-primary;
            color: $uv-primary;
            padding: 0 8rpx;
          }
          .price {
            color: $uv-price-primary;
          }
        }
      }
    }
  }
  .no-bg {
    padding: 0 30rpx;
    background-color: rgba(0, 0, 0, 0.4);
    .text {
      display: inline-block;
      color: white;
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }
  }
}
</style>
